<template>
  <div class="popup">
    <u-popup
      @close="close"
      :mask-close-able="maskClose"
      v-model="showTips"
      :mode="mode"
      :closeable="isBloseable"
      :width="widthVal"
      :height="heightVal ==0? '':heightVal"
		:borderRadius="borderRadiusVal"
    >
      <slot></slot>
    </u-popup>
  </div>
</template>

<script>
export default {
  name: "popup",
  props: {
    show: Boolean,
    //点击遮罩是否可以关闭弹出层
    ismaskClose: {
      type: Boolean,
      default: false,
    },
    modeType:{
      type:String,
      default:'center'
    },
    // 是否显示左上角关闭图标
    closeable:{
      type: Boolean,
      default: false,
    },
    width:{
      type:[String,Number],
      default:'100%'
    },
    height :{
      type:[String,Number],
      default:'0'
    },
		borderRadius:{
			type:String,
			default:'15'
		}
  },
  data() {
    return {
      showTips: false,
      maskClose: false,
      mode:'center',
      isBloseable:false,
      widthVal:"100%",
			borderRadiusVal:'0',
      heightVal:'100%'
    };
  },
  computed: {},
  methods: {
    close() {
      this.showTips = false;
      this.$emit("closeFn");
    },
  },
  watch: {
    show(v) {
      this.showTips = v;
    },
    width(v){
      this.widthVal = v
    },
    height(v){
      this.heightVal = v
    },
		borderRadius(v){
			this.borderRadiusVal = v
		}
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.mode = this.modeType
    this.showTips = this.show || false;
    this.maskClose = this.ismaskClose;
    this.isBloseable = this.closeable;
    this.widthVal = this.width;
    this.heightVal = this.height;
		this.borderRadiusVal = this.borderRadius

  },
};
</script>

<style lang="scss" scoped></style>